<template>
	<view>
		<view class="flex u-m-t-20">
			<view class="x-nav-left">
				<view>
					<block v-for="(item,z) in typelist" :key="z">
						<view @click="select(item.id,z)" :class="current==z?'cur':''" class="text-center cell ">
							{{item.deptName}}
						</view>
					</block>
				</view>
			</view>
			<view class="x-nav-right">
				<scroll-view class="scroll-view_H" :scroll-y="true" @scrolltolower="scrolltolower">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
						v-if="productInfoList.length==0" style="margin-right: 50rpx;">
					</u-empty>
					<view class="flex flex-wrap">
						<block v-for="(item,i) in productInfoList" :key="i">
							<view @click="$u.route('/pages/index/product/product',{id:item.id,isMall:'1'})"
								class="u-m-l-24 u-m-b-28">
								<u-image :showLoading="true" mode="aspectFill" radius="8rpx" :src="item.showImg"
									width="240rpx" height="240rpx">
									<view slot="loading">
										<u-loading-icon></u-loading-icon>
									</view>
								</u-image>
								<view>
									<view class="text-black u-m-t-10 u-font-sm name">{{item.type==0?item.fuTitle:item.title}}</view>
									<view class="u-font-24 text999">{{item.brand?item.brand:'无'}}</view>
									<view class="flex align-center justify-between">
										<view class="price">
											<text class="u-font-xs text-red">￥</text>
											<text
												class="u-font-32 text-bold text-red">{{parseFloat(item.priceStart).toFixed(2)}}</text>
											<!-- <text class="u-font-xs text-gray">起</text> -->
											<!-- <view class="u-m-l-32 u-font-24 text999 u-p-l-20 u-p-r-20 text-decoration: line-through;">
												原价￥{{parseFloat(item.price).toFixed(2)}}</view> -->
										</view>
										<view style="color: #999;font-size: 24rpx;">已购:{{item.outCount||0}}</view>
										<!-- <view class="add" @click="$u.route('/pages/product/product',{id:item.id})">+</view> -->
									</view>
								</view>
							</view>
						</block>
					</view>
					<view class="flex flex-wrap" style="height: 100rpx;"></view>
					<empty :show="brandlist.length==0"></empty>
				</scroll-view>
			</view>
		</view>

		<view class="footer flex align-center justify-between">
			<view class="flex align-center">
				<view class="flex align-center flex-direction" @click="handleToCart()">
					<u-icon name="/static/index/cart.png" size="44rpx"></u-icon>
					<view class="u-font-24 u-m-t-10" style="color: #282828;">购物车</view>
				</view>
				<!-- <text class="u-m-l-20 u-m-r-20">|</text>
				<view>
					<text>总计:￥</text>
					<text class="text-bold" style="font-size: 32rpx;">0</text>
				</view> -->
			</view>
			<!-- <view class="btn">立即下单</view> -->

		</view>
		<u-modal :show="showSelectYizhan"  @confirm="checkOk" ref="uModal"  title="购物提醒"  >
			<slot>
				<text style="text-align: center;">为了方便您购物,先选择附近驿站</text>
			</slot>
		</u-modal>
	</view>
</template>

<script>
	import {
		getRubbishType,
		getProductInfoList,
		getEquInfoList
		// addCart
	} from '@/common/api/api.js'

	export default {
		data() {
			return {
				type_name: '',
				params: {
					page: 1,
					take: 10,
					network_id: '',
					type_id: ''
				},
				brandlist: [], //品牌
				typelist: [], //类型
				productInfoList: [],
				keyword: '',
				current: 0,
				busType: 0,
				stageInfoList: [],
				companyId: '',
				stageInfo: {},
				showSelectYizhan:false,
				typeId:''
			}
		},
		mounted() {
			// 监听选择驿站
			uni.$on("stageBackShop", this.onNavigateToStageBack);
		},
		beforeDestroy() {
			// 移除返回事件
			uni.$off('stageBackShop', this.onNavigateToStageBack);
		},
		onShow: function() {
			
		},
		onLoad(options) {
			console.log("options",options)
			if (options.busType) {
				this.busType = options.busType;
				if (this.busType == '1') {
					if (!this.stageInfo.housingName) {
						this.showSelectYizhan=true;
					}else{
						this.handleGetGoodTypelist();
					}
					// this.handleGetEquInfoList();
				}
			}
		},
		methods: {
			// 如果是商城获取商家列表
			handleGetEquInfoList() {
				let that = this;
				uni.getLocation({
					type: 'wgs84', //gcj02
					success: function(res) {
						let lat = res.latitude;
						let lng = res.longitude;
						console.log("lat,lan", lat, lng, res);
						getEquInfoList({
							lng: lng,
							lat: lat
						}).then(res => {
							that.stageInfoList = res.data.list;
						})
					},
					fail: function(e) {
						console.log('定位失败')
						console.log(e)
					}
				})
			},
			//获取类型
			handleGetGoodTypelist() {
				getRubbishType({
					level: 1,
					id: '',
					busType: this.busType,
				}).then(res => {
					this.typelist = res.data;
					if(this.typeId){
						res.data.map((item,index)=>{
							if(item.id==this.typeId){
								this.current=index;
							}
						})
						this.handleGetGoodslist({rubbishTypeId:this.typeId,companyId:this.stageInfo.companyId});
					}else{
						this.handleGetGoodslist({rubbishTypeId:res.data[0].id,companyId:this.stageInfo.companyId});
					}
				})
			},
			// 获取产品信息
			handleGetGoodslist(params) {
				let that = this;
				getProductInfoList(params).then(res => {
					if (res.data.length == 0) {
						return;
					}
					that.productInfoList = res.data.list.map(item => {
						item.showImg = JSON.parse(item.indexImg)[0];
						return item;
					});
				})
			},
			handleAddCart(id) {
				if (!this.$store.state.$token) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return;
				}
				addCart({
					goods_id: id,
					openid: this.$store.state.$userInfo.openid,
					network_id: this.$store.state.$network.id,
					number: 1,
				}).then(res => {
					uni.$u.toast('加入购物车成功');
				})
			},
			select(id, z) {
				this.current = z;
				this.typeId=id;
				this.handleGetGoodslist({
					rubbishTypeId: id,companyId:this.stageInfo.companyId
				});
			},
			scrolltolower() {
				this.handleGetGoodslist({
					rubbishTypeId: this.typeId,companyId:this.stageInfo.companyId
				});
			},
			// 购物车
			handleToCart() {
				this.$u.route('/pages/cart/mallCart?companyId='+this.stageInfo.companyId);
			},
			// 监听驿站返回调用函数
			onNavigateToStageBack(item) {
				console.log("xxxx",item);
				this.stageInfo = item;
				this.showSelectYizhan=false;
				this.handleGetGoodTypelist();
			},
			checkOk(){
				this.$u.route('/pages/index/stage/shopStage');
			}

		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss">
	.border {
		border: 1px solid red;
	}

	.search-css {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		.status-bar {
			position: relative;
			z-index: 999;
			background-color: #ffffff;
		}

		.search-item {
			position: relative;
			z-index: 999;
			background-color: #ffffff;

			.scan-css {
				position: absolute;
				right: 46rpx;
				background-color: #fff;
				top: 40rpx;
				border-left: 1px solid #EFF1F2;
				padding-left: 20rpx;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.scroll-view_H {
		// #ifdef MP-WEIXIN
		height: calc(100vh - 40rpx);
		//#endif
	}

	.x-nav-left {
		width: 200rpx;
		text-align: center;
		background-color: #F4F8F9;
		// border-top-right-radius: 20rpx;
		// #ifdef H5
		height: calc(100vh - 130rpx);
		//#endif

		// #ifdef MP-WEIXIN || MP-TOUTIAO
		height: calc(100vh - 20rpx);
		//#endif
		overflow-y: auto;
		color: #555553;

		.cell {
			height: 120rpx;
			line-height: 120rpx;
		}
	}

	.x-nav-right {
		width: 550rpx;
		background-color: #ffffff;
		// #ifdef APP-PLUS
		height: calc(100vh - 208rpx);
		//#endif
		// #ifdef MP-WEIXIN || MP-TOUTIAO
		height: calc(100vh - 20rpx);
		//#endif
	}

	.cur {
		position: relative;
		color: #FF5B00;
		font-weight: bold;
		background-color: #ffffff;
	}

	.cur::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 8rpx;
		background: linear-gradient(313deg, #FF5B00 0%, #FF5B00 100%);
		border-radius: 0px 2px 2px 0px;
	}

	.text-black {
		color: #333;
	}

	.text-bold {
		font-weight: 800;
	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.price {
		color: #333333;
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #666666;
		font-size: 28rpx;
	}

	.add {
		width: 36rpx;
		height: 36rpx;
		background: #FF5B00;
		border-radius: 4rpx;
		color: #fff;
		text-align: center;
		line-height: 36rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
		padding: 20rpx 32rpx;

		.btn {
			width: 190rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}
</style>